<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Web remote desktop</title>

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.timers.js" type="text/javascript"></script>
<?php //"<script src="js/jquery.contextmenu.r2.js" type="text/javascript"></script>"; ?>



<style type="text/css">
	body{ margin:0px; padding:0px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px }
	#screen{ border:2ps solid #3399CC; float:left; }
	#context { position:absolute; width:244px; left:100px; top:100px; display:none; }
	#context a, #context span{ float:left; width:70px; color:#000; text-decoration:none; padding-left:10px; 
	background:url(image/blank.png); height:25px; line-height:25px; border-collapse:collapse; }
	#context a:hover{ color:#FF6600;}
	#context a img{ margin-bottom:-6px; border:none; }
	
	#context a.top { margin-left:81px; margin-right:20px; border-top:1px solid #999; 
	border-left:1px solid #999; border-right:1px solid #999; }
	#context a.left { border-left:1px solid #999;  border-top:1px solid #999; border-bottom:1px solid #999; }
	#context a.right { border-right:1px solid #999;  border-top:1px solid #999; border-bottom:1px solid #999; }
	#context a.bottom { margin-left:81px; border-left:1px solid #999;  border-bottom:1px solid #999; border-right:1px solid #999; }
	#context a.center {  border:1px solid #999;  }
	


	#inputPanel { position:absolute; width:300px; height:200px; display:none; 
				border:1px solid #CCCCCC; text-align:center; background:#FFF; }
	#inputPanel textarea{ width:100%; height:150px; }	
</style>

</head>
<body>
	<div id="screen">
    	<img id="canvas" name="bg" src="<?php echo file_get_contents("./image/screen/current.txt"); ?>"/>
    </div>
    <div id="log">ready</div>
    
    
    <div id="context">
        <a class="top" href="void(0);" rel="pointer" cmd="CAPTURE"><img src="image/capture.png" /> Screen</a>
        <a class="left" href="void(0);" rel="pointer" cmd="DOUBLE_CLICK">Double <img src="image/dbclick.png" /></a>
        <a class="center" href="void(0);" rel="pointer" cmd="CLICK"><img src="image/click.png" /> Click</a>        
        <a class="right" href="void(0);" rel="pointer" cmd="RIGHT_CLICK"><img src="image/rclick.png" /> Right</a>        
        <a class="bottom" href="void(0);" rel="type"    cmd="TYPE"><img src="image/type.png" />Type</a>        
    </div>
    
    <div>
    	
    </div>
    
    
    <div id="inputPanel">
    	<textarea name="inputPanel_text"></textarea>
        <input type="button" value="Send" name="inputPanel_send" />
        <input type="button" value="Cancel" name="inputPanel_cancel" />
    </div>
    
    <?php
    	//check browser
		$os = $_SERVER["HTTP_USER_AGENT"];

		if( strstr( $os, "Windows") ){
			$os = "windows";
		}else{
			$os = "mobile";
		}
	?>
    <input name="os" type="hidden" value="<?php echo $os;?>"/>
    
    <script>
		var pointX, pointY;
		$(document).ready(function(){
			//click event on canvas
			$("#canvas").click(function(e){				
				if( $("input[name='os']").val() == "windows" ){
					sendClick( "CLICK", e.pageX, e.pageY );
				}else{
					showCommand(e.pageX, e.pageY);
				}
			});
			
			//right click on canvas -> show context menu
			$("#canvas").bind('contextmenu',function(e){
				showCommand(e.pageX, e.pageY);
				return false;
			 });
			 			 
			 
			$('a[rel="pointer"]').click( function(e){
				//get x, y of mouse click -> attribute fx, fy of contextMenu [jqContextMenu]				
				var cmd = $(this).attr("cmd");				
				
				$('#context').hide();
				sendClick( cmd, pointX, pointY );
				
				return false;
			});
			 
			 
			 
			$('a[rel="type"]').click( function(e){
				var x   = $('#context').offset().left  - ($('#context').width()/2);
				var y   = $('#context').offset().top  - ($('#context').height()/2);
				
				$('#inputPanel').css({ left: pointX, top: pointY, zIndex: '101' }).show();
				$('#context').hide();
				$("[name=inputPanel_text]").focus();
				return false;
			});
			 			 			 
			$("[name=inputPanel_text]").keypress(function(e){
			 	//if press Enter but not hold SHIFT -> send command
				if(!e.shiftKey && e.which==13){
					var x   = $('#inputPanel').offset().left;
					var y   = $('#inputPanel').offset().top;
					$('#inputPanel').hide();
					sendType( $("[name=inputPanel_text]").val(), x, y );
					$("[name=inputPanel_text]").val("");
              	}
			});
			$("[name=inputPanel_send]").click(function(e){
					var x   = $('#inputPanel').offset().left;
					var y   = $('#inputPanel').offset().top;
					$('#inputPanel').hide();
					sendType( $("[name=inputPanel_text]").val(), x, y );
					$("[name=inputPanel_text]").val("");
			});
			$("[name=inputPanel_cancel]").click(function(e){
				$('#inputPanel').hide();				
				$("[name=inputPanel_text]").val("");
			});
			
			 
			 
		 });		 
					
	</script>
    
    <script>
		var counter = 0;		
		$(document).ready(function(){			
			$(document).everyTime(1000, "checkready", function(i) {
				wait();
			}, 0);			
		});
		
		
		//cmd could be: CLICK, DOUBLE_CLICK, RIGHT_CLICK, CENTER_CLICK
		function sendClick(cmd, x, y){
			$.ajax({ 
				url: "addcommand.php", 
				type: "POST",
				data: ({ cmd: cmd, x: x, y: y })
			});
			$('#context').hide();
		}
		
		function sendType(content, x, y){
			$.ajax({ 
				url: "addcommand.php", 
				type: "POST",
				data: ({ cmd: "TYPE", content: content, x: x, y: y })
			});
		}
		
		
		function showCommand(x,y){
			pointX = x;
			pointY = y;
			$('#context').css({ left: x - ($('#context').width()/2), top: y - $('#context').height()/2, zIndex: '101' }).show();
		}
		
		var current_file = $("#canvas").attr('src');
		function wait(){
			$(document).ready(function(){				
				$.ajax({ 
				url: "ready.php", 
				success: function(msg){
					$("#xxx").html(msg);
					
					if( msg == "wait" ){
						$("#canvas").attr('src','');
						$("#log").html( $("#log").html().replace("ready","wait") +"." );
					}else{
						if( current_file != msg ){
							$("#canvas").attr('src', msg);
							current_file = msg;
						}
						$("#log").html("Ready");
						
					}
				}});
			});
		}
		
	</script>
    
    
    <div id="xxx"></div>
</body>
</html>
